
<style type="text/css">


.sidebarTop {
	position:fixed;    
    right:10;
    padding-top: -100px;
}

.sidebarDefault{
	position:relative;
}

</style>

<script>
$(function(){
	 var sidebar = $('#myScrollspy'),
		pos = sidebar.offset();	 
		$(window).scroll(function(){			
			if($(this).scrollTop() > pos.top+sidebar.height() && sidebar.hasClass('sidebarDefault')){				
				sidebar.fadeOut('fast', function(){
					$(this).removeClass('sidebarDefault').addClass('sidebarTop').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && sidebar.hasClass('sidebarTop')){
				sidebar.fadeOut('fast', function(){
					$(this).removeClass('sidebarTop').addClass('sidebarDefault').fadeIn('fast');
				});
			}
		}); 

});</script>

<div id="myScrollspy" class="bs-docs-sidebar hidden-print sidebarDefault"
	role="complementary">
	<ul class="nav bs-docs-sidenav">
			<?php
			foreach ( $sideBarList as $time ) :
				?>
			
			<li><a href="#<?php
				
				echo $time ['dateTime'];
				?>"><?php echo $time ['dateTime']; ?></a></li>
			
			<?php endforeach;?>
		</ul>
	<a class="back-to-top" href="#top"> Back to top </a>
</div>

